<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/index.css">
    <title>常用速查区</title>
</head>

<body style="background-color: rgba(250, 250, 250);">
    <!-- 字体篇 -->
    <div class="container">
        <h1>常用速查区 - 字体篇</h1>
        <p class="description">
            这里汇集了常用的字体相关 CSS 样式，方便快速查阅。
        </p>
        <div class="main-contents">
            <div class="content">
                <div class="info">
                    <h3>font-family</h3>
                    <p>设置字体系列，按优先顺序指定多个字体</p>
                    <ul>
                        <li><code>font-family: "Arial", sans-serif;</code>：优先使用 Arial，不支持时使用 sans-serif 系统字体</li>
                        <li><code>font-family: "Microsoft YaHei", "黑体", sans-serif;</code>：适用于中文网页</li>
                        <li><code>font-family: "Courier New", monospace;</code>：等宽字体</li>
                        <li><code>font-family: 'Inter', 'Helvetica', sans-serif;</code>：使用 Web 字体 + 回退字体</li>
                    </ul>
                    <p>常见字体族分类：</p>
                    <ul>
                        <li><code>serif</code>：衬线字体（如 Times New Roman）</li>
                        <li><code>sans-serif</code>：无衬线字体（如 Arial）</li>
                        <li><code>monospace</code>：等宽字体（如 Courier New）</li>
                        <li><code>cursive</code>：手写风格字体</li>
                        <li><code>fantasy</code>：艺术装饰字体</li>
                    </ul>
                    <p>建议总是提供多个字体作为备选，并以通用族名结尾（如 <code>sans-serif</code>）。</p>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>font-size</h3>
                    <p>设置字体大小</p>
                    <ul>
                        <li><code>font-size: 16px;</code>：常见默认大小</li>
                        <li><code>font-size: 1.2em;</code>：相对于父元素大小</li>
                        <li><code>font-size: 100%;</code>：继承默认大小</li>
                        <li><code>font-size: 1rem;</code>：相对于根元素</li>
                    </ul>
                    <p>常用单位包括 <code>px</code>、<code>em</code>、<code>rem</code>、<code>%</code> 等。</p>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>font-weight</h3>
                    <p>设置字体粗细</p>
                    <ul>
                        <li><code>font-weight: normal;</code>（等同于 400）</li>
                        <li><code>font-weight: bold;</code>（等同于 700）</li>
                        <li><code>font-weight: 100 ~ 900;</code>：数值越大越粗</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>font-style</h3>
                    <p>设置字体样式</p>
                    <ul>
                        <li><code>font-style: normal;</code>：正常字体</li>
                        <li><code>font-style: italic;</code>：斜体</li>
                        <li><code>font-style: oblique;</code>：倾斜体</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>line-height</h3>
                    <p>设置文本的行高（行距）</p>
                    <ul>
                        <li><code>line-height: 1.5;</code>：推荐无单位使用，便于继承</li>
                        <li><code>line-height: 24px;</code>：也可用具体像素</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>letter-spacing / word-spacing</h3>
                    <p>设置字母与单词间距</p>
                    <ul>
                        <li><code>letter-spacing: 0.1em;</code>：增加字母间距</li>
                        <li><code>word-spacing: 0.2em;</code>：增加单词间距</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>text-align</h3>
                    <p>设置文本水平对齐</p>
                    <ul>
                        <li><code>left</code>：左对齐</li>
                        <li><code>center</code>：居中对齐</li>
                        <li><code>right</code>：右对齐</li>
                        <li><code>justify</code>：两端对齐</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>text-transform</h3>
                    <p>设置文本大小写转换</p>
                    <ul>
                        <li><code>text-transform: none;</code>：不转换</li>
                        <li><code>text-transform: capitalize;</code>：每个单词首字母大写</li>
                        <li><code>text-transform: uppercase;</code>：转为大写</li>
                        <li><code>text-transform: lowercase;</code>：转为小写</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>text-decoration</h3>
                    <p>设置文本装饰</p>
                    <ul>
                        <li><code>none</code>：无装饰</li>
                        <li><code>underline</code>：下划线</li>
                        <li><code>line-through</code>：删除线</li>
                        <li><code>overline</code>：上划线</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>color</h3>
                    <p>设置文字颜色，支持多种格式</p>
                    <ul>
                        <li><code>color: #333;</code> 十六进制</li>
                        <li><code>color: rgb(255, 0, 0);</code> RGB</li>
                        <li><code>color: rgba(255, 0, 0, 0.5);</code> 带透明度的 RGBA</li>
                        <li><code>color: hsl(120, 100%, 50%);</code> HSL</li>
                        <li><code>color: transparent;</code> 透明色</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>text-shadow</h3>
                    <p>添加文字阴影效果</p>
                    <ul>
                        <li><code>text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);</code>：水平偏移、垂直偏移、模糊度、颜色</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>direction</h3>
                    <p>设置文字书写方向</p>
                    <ul>
                        <li><code>direction: ltr;</code>：从左到右（默认）</li>
                        <li><code>direction: rtl;</code>：从右到左</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>white-space</h3>
                    <p>控制空格和换行行为</p>
                    <ul>
                        <li><code>white-space: normal;</code>：默认自动换行</li>
                        <li><code>white-space: nowrap;</code>：不换行</li>
                        <li><code>white-space: pre;</code>：保留所有空格和换行</li>
                        <li><code>white-space: pre-wrap;</code>：保留空格并自动换行</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>单行省略号</h3>
                    <p>用于文字超出容器时显示省略号</p>
                    <ul>
                        <li>
                            <code>
                                overflow: hidden;<br>
                                white-space: nowrap;<br>
                                text-overflow: ellipsis;
                            </code>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>

    <!-- 布局篇 -->
    <div class="container">
        <h1>常用速查区 - 布局篇</h1>
        <p class="description">
            这里汇集了常用的布局相关 CSS 样式，方便快速查阅。
        </p>
        <div class="main-contents">
            <div class="content">
                <div class="info">
                    <h3>display</h3>
                    <p>定义元素的显示类型</p>
                    <ul>
                        <li><code>display: block;</code>：块级元素</li>
                        <li><code>display: inline;</code>：内联元素</li>
                        <li><code>display: inline-block;</code>：内联块元素</li>
                        <li><code>display: none;</code>：隐藏元素</li>
                        <li><code>display: flex;</code>：弹性盒子布局</li>
                        <li><code>display: grid;</code>：网格布局</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>position</h3>
                    <p>设置元素的定位方式</p>
                    <ul>
                        <li><code>static</code>：默认定位</li>
                        <li><code>relative</code>：相对定位</li>
                        <li><code>absolute</code>：绝对定位（相对最近定位父元素）</li>
                        <li><code>fixed</code>：固定定位（相对视口）</li>
                        <li><code>sticky</code>：粘性定位（滚动时固定）</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>flex 布局</h3>
                    <p>用于弹性盒子模型布局</p>
                    <ul>
                        <li><code>display: flex;</code> 启用 flex 容器</li>
                        <li><code>flex-direction: row | column;</code> 设置主轴方向</li>
                        <li><code>justify-content: center | space-between | space-around;</code> 主轴对齐</li>
                        <li><code>align-items: center | stretch | flex-start;</code> 交叉轴对齐</li>
                        <li><code>flex-wrap: nowrap | wrap;</code> 是否换行</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>grid 布局</h3>
                    <p>用于二维网格布局</p>
                    <ul>
                        <li><code>display: grid;</code> 启用网格容器</li>
                        <li><code>grid-template-columns: 1fr 1fr;</code> 设置列宽比例</li>
                        <li><code>grid-template-rows: auto auto;</code> 设置行高</li>
                        <li><code>gap: 10px;</code> 设置网格间距</li>
                        <li><code>grid-column: 1 / 3;</code> 跨列</li>
                        <li><code>grid-row: 1 / span 2;</code> 跨行</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>z-index</h3>
                    <p>控制元素堆叠顺序（仅对定位元素生效）</p>
                    <ul>
                        <li><code>z-index: 1;</code>：值越大越靠前</li>
                        <li><code>z-index: -1;</code>：可用于将元素置于背景</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>overflow</h3>
                    <p>控制内容溢出时的行为</p>
                    <ul>
                        <li><code>visible</code>：默认显示溢出内容</li>
                        <li><code>hidden</code>：隐藏超出部分</li>
                        <li><code>scroll</code>：始终显示滚动条</li>
                        <li><code>auto</code>：必要时显示滚动条</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <h1>常用速查区 - 盒模型篇</h1>
        <p class="description">盒模型是网页布局的基础，以下是常见盒子相关属性。</p>
        <div class="main-contents">
            <div class="content">
                <div class="info">
                    <h3>margin</h3>
                    <p>设置外边距</p>
                    <ul>
                        <li><code>margin: 10px;</code> 四边都设置</li>
                        <li><code>margin: 10px 20px;</code> 上下、左右</li>
                        <li><code>margin: 10px 15px 5px 0;</code> 上右下左</li>
                        <li><code>margin: auto;</code> 可用于居中</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>padding</h3>
                    <p>设置内边距</p>
                    <ul>
                        <li><code>padding: 20px;</code> 四边都设置</li>
                        <li><code>padding: 10px 15px;</code> 上下、左右</li>
                        <li><code>padding: 5px 10px 15px 20px;</code> 上右下左</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>border</h3>
                    <p>设置边框样式</p>
                    <ul>
                        <li><code>border: 1px solid #000;</code> 黑色实线边框</li>
                        <li><code>border: none;</code> 无边框</li>
                        <li><code>border-radius: 10px;</code> 设置圆角</li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <div class="info">
                    <h3>box-sizing</h3>
                    <p>定义盒子大小计算方式</p>
                    <ul>
                        <li><code>content-box</code>：默认，宽高不包含 padding 与 border</li>
                        <li><code>border-box</code>：宽高包含 padding 和 border</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</body>


</html>